<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<TITLE>FAQFAQ - Kind Editor-Web WYSIWYG Online Editor</TITLE>
<link href="prettify.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
  <div class="right">
     <h2>Kind Editor Documentation</h2>
     <ul>
       <li>
         <a href="add-editor-to-your-web-page.html">Add Editor To Your Web Page</a>
         </li><li>
         <a href="editor-attributes-for-customization.html">Editor Attributes For Customization</a>
         </li><li>
         <a href="faq.html">FAQ</a>
         </li><li>
         <a href="kind-editor-api.html">Kind Editor API</a>
         </li><li>
         <a href="write-web-editor-plugin.html">Write Web Editor Plugin</a>
         </li>     </ul>
  </div>
  <div><h1 class="standalone">FAQ</h1></div>
  <div class="main">
   <div class="left">
    <dl>
     <p><div class="margin-20">
<div class="doc-navi">
<ol>
    <li><a href="#001">Kind editor is in UTF-8 encoded. Can I use it within some other encoding web page?</a></li>
    <li><a href="#002">Nothing happens when I load editor via ajax way.</a></li>
    <li><a href="#003">Why some HTML tags get losed?</a></li>
    <li><a href="#004">Kind editor doesn't work. It seems that its CSS style conflicts with mine.</a></li>
    <li><a href="#005">Error occurs with image inserting/hyper link being clicking on with cross-domain-loaded editor.</a></li>
    <li><a href="#006">I can't get HTML slice generated by editor. I get nothing from value of textarea.</a></li>
</ol>
</div>
</div>
<div class="margin-20">
<div class="myblock" id="001">
<div class="header">Kind editor is in UTF-8 encoded. Can I use it within some other encoding web page?</div>
Yes, the simplest way to define charset to utf-8 when import kindeditor.js.
<pre class="prettyprint"><span class="pun">&lt;</span><span class="tag">script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">&quot;text/javascript&quot;</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">&quot;utf-8&quot;</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;/editor/kindeditor.js&quot;</span><span class="pun">&gt;<!--</span--><span class="tag">script</span><span class="pun">&gt;</span></span></pre>
</div>
</div>
<div class="margin-20">
<div class="myblock" id="002">
<div class="header">Nothing happens when I load editor via ajax way.</div>
You need to know difference between KE.show and KE.create. If KE.show called, KE.init will be executed first. When DOM is ready, KE.create will be executed. If event DOMContentLoaded is not fired, for example, via ajax. At this time, DOM has been ready,  KE.create will not be reached. You may need to call KE.init and KE.create one by one.
<pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">init</span><span class="pun">({</span><span class="pln"><br />&nbsp; &nbsp; id </span><span class="pun">:</span><span class="pln"> </span><span class="str">'textarea_id'</span><span class="pln"><br /></span><span class="pun">});</span><span class="pln"><br />KE</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="str">'textarea_id'</span><span class="pun">);</span></pre>
</div>
</div>
<div class="margin-20">
<div class="myblock" id="003">
<div class="header">Why some HTML tags get losed?</div>
Please check if you have set filterMode to true. Turning it off will help you out.
<pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">show</span><span class="pun">({</span><span class="pln"><br />&nbsp; &nbsp; id </span><span class="pun">:</span><span class="pln"> </span><span class="str">'textarea_id'</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; filterMode </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="com">// true: filter on, false:filter off</span><span class="pln"><br /></span><span class="pun">});</span></pre>
</div>
</div>
<div class="margin-20">
<div class="myblock" id="004">
<div class="header">Kind editor doesn't work. It seems that its CSS style conflicts with mine.</div>
The root cause may be that your global css selector overwrite kind editor's.<br />
Solution is define these conflicted selector (for example, div/table/td) twice. Firstly, put skins/default.css import declaration after your css file, then define selectors again after declaration.<br />
<pre class="prettyprint"><span class="pun">&lt;</span><span class="tag">style</span><span class="pun">&gt;</span><span class="pln"><br /></span><span class="com">/* your CSS definition */</span><span class="pln"><br />img </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#555555;</span><span class="pln"><br />&nbsp; &nbsp; padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"><br /></span><span class="pun">}</span><span class="pln"><br /></span><span class="pun"><!--</span--><span class="tag">style</span><span class="pun">&gt;</span><span class="pln"><br /><br /></span><span class="com"><!-- import CSS file --></span><span class="pln"><br /></span><span class="pun">&lt;</span><span class="tag">link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">&quot;stylesheet&quot;</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">&quot;text/css&quot;</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">&quot;./skins/oxygen.css&quot;</span><span class="pln"> </span><span class="pun">/&gt;</span><span class="pln"><br /><br /></span><span class="pun">&lt;</span><span class="tag">style</span><span class="pun">&gt;</span><span class="pln"><br /></span><span class="com">/* redefine conflicted CSS */</span><span class="pln"><br />img </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"><br /></span><span class="pun">}</span><span class="pln"><br /></span><span class="pun"><!--</span--><span class="tag">style</span><span class="pun">&gt;</span><span class="pln"><br /><br /></span><span class="com"><!--loadStyleMode needs to be set to false as you hava import CSS explicitly --></span><span class="pln"><br /></span><span class="pun">&lt;</span><span class="tag">script</span><span class="pun">&gt;</span><span class="pln"><br />KE.show({<br />&nbsp; &nbsp; id : 'textarea_id',<br />&nbsp; &nbsp; loadStyleMode : false<br />});<br /></span><span class="pun"><!--</span--><span class="tag">scirpt</span><span class="pun">&gt;</span></span></span></span></pre>
</div>
</div>
<div class="margin-20">
<div class="myblock" id="005">
<div class="header">Error occurs with image inserting/hyper link being clicking on with cross-domain-loaded editor.</div>
These operations will call out of pop window, which is implemented with iframe. Different domain within iframe will lead to javascript security exception. <br />
One solution is using postMessage, which is not supported by  IE6/IE7. <br />
Another way is to reimplement KE.dialog without iframe.</div>
</div>
<div class="margin-20">
<div class="myblock" id="006">
<div class="header">I can't get HTML slice generated by editor. I get nothing from value of textarea.</div>
Please call KE.util.setData() before reference to TEXTAREA.Value.<br />
By default, kind editor will call KE.util.setData() automatically within onsubmit event of form.
<pre class="prettyprint"><span class="com">//fill HTML generated back to textarea</span><span class="pln"><br />KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">setData</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"><br /><br /></span><span class="com">//KE.util.setData equals the following code</span><span class="pln"><br />KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">srcTextarea</span><span class="pun">.</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">getData</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span></pre>
</div>
</div></p>
    </dl>
   </div>
  </div>
  <div class="footer">
     <div class="copyright"> 
       <span class="r">Copyright &copy; 2005-2009 Kindsoft LLC, All Rights Reserved.
     </div>
  </div>

</div>
</body>
</html>